<!-- -->
<template>
  <div class="detail public">
    <div id="viewer"></div>
    <div class="detail-main">
      <p class="jianjie">
        <span>简介：{{ item.housingName }}</span>
        <span>购价：{{ item.sellingprice }}万/套</span>
      </p>
      <div class="tao">
        <p>
          <span>10套</span>
          <span>二手房源</span>
        </p>
        <p>
          <span>2套</span>
          <span>出租房源</span>
        </p>
        <p>
          <span>3套</span>
          <span>最近成交</span>
        </p>
      </div>
      <van-collapse v-model="activeNames" :accordion="isShow">
        <van-collapse-item :title="isShow ? '展开' : '收起'" name="1">
          <p>
            小区名：{{ item.listingTitle }}
            <span class="vr">VR实景看房</span>
          </p>
          <p>城市：{{ item.detailAddress }}</p>
          <p>详细地址：{{ item.area }}</p>
          <p>配置：{{ item.fitment }}</p>
          <p>户型：{{ item.houseType }}</p>
          <p>占地面积：{{ item.houseArea }}</p>
          <p>家具配置：{{ item.houseAssort }}</p>
          <p>大众评价：{{ item.listingDesc }}</p>
          <p>房子朝向：{{ item.orientation }}</p>
          <p>限售时间：{{ item.termValidity }}</p>
        </van-collapse-item>
      </van-collapse>
    </div>

    <div class="mapBox">
      <h3>周边配套</h3>
      <div class="tab">
        <span
          v-for="(item,idx) in tabList"
          :key="idx"
          @click="searchInfo(item,idx)"
          :class="active === idx ? 'active' : ''"
        >{{item}}</span>
      </div>
      <div class="map">
        <baidu-map
          class="map"
          :center="{lng: nearby.center.lng, lat: nearby.center.lat}"
          :zoom="13"
        >
          <bm-marker
            v-for="item in area"
            :key="item.id"
            :position="{lng: item.longitude, lat: item.latitude}"
            :dragging="true"
            @click="infoWindowOpen"
          >
            <bm-info-window
              :show="show"
              @close="infoWindowClose"
              @open="infoWindowOpen"
            >{{item.name}}</bm-info-window>
          </bm-marker>

          <bm-view class="map"></bm-view>
          <bm-local-search :keyword="keyword" :nearby="nearby" :auto-viewport="true" :panel="false"></bm-local-search>
          <bm-circle :center="nearby.center" :radius="nearby.radius"></bm-circle>
        </baidu-map>
      </div>
    </div>

    <div class="detail-list">
      <h3>猜你喜欢</h3>
      <div v-for="(item, idx) in list" :key="idx" class="list-main-item">
        <img :src="item.img" alt />
        <div class="list-text">
          <div class="list-item-title">
            <p>{{ item.listingTitle }}</p>
          </div>
          <p class="list-text-p1">
            <span>{{ item.area }}</span>丨
            <span>建面{{ item.houseArea }}</span>
          </p>
          <p class="list-text-p2">
            <span>{{ item.sellingprice }}</span>万/套
          </p>

          <div class="list-item-label">
            <span>{{ item.fitment }}</span>
            <span>{{ item.fitmentType }}</span>
            <span>{{ item.Speciallabel }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="btn" @click="goBack">
      <van-icon name="arrow-left" class="icon" />
    </div>
    <div>
      <button class="nono" v-if="identity==='普通用户'" @click="creataChat">资讯</button>
    </div>
  </div>
</template>
<script>
import { getInfoList, getTabList, chat, getMapArea } from "../../../api";
import { mapState } from "vuex";
// 引入vr需要的插件
import { Viewer } from "photo-sphere-viewer";
import MarkersPlugin from "photo-sphere-viewer/dist/plugins/markers";
import "photo-sphere-viewer/dist/photo-sphere-viewer.css";
import "photo-sphere-viewer/dist/plugins/markers.css";

export default {
  name: "detail",
  // import引入到组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      id: 0,
      item: {},
      activeNames: ["1"],
      current: 0,
      isShow: false,
      list: [], // 数据
      classify: 2, //数据类型
      viewer: "", //VR 承载实例
      ids: 0, //经纪人id
      imgurl1: require("@/assets/1.webp"),
      imgurl2: require("@/assets/2.webp"),
      imgurl3: require("@/assets/3.webp"),
      imgurl4: require("@/assets/4.webp"),
      identity: "", //登录人身份
      tabList: ["交通", "教育", "医疗", "购物", "生活", "娱乐"],
      show: false,
      nearby: {
        center: {
          lng: "",
          lat: ""
        },
        radius: 1000
      },
      areaInfo: [],
      area: "",
      keyword: "",
      active: 0

      // imgurl5: require("@/assets/5.jpg")
    };
  },
  // 监听属性 类似于data概念
  computed: {
    ...mapState(["userId"])
  },
  // 监听data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 获取详情数据
    getDetailList() {
      this.id = this.$route.params.id;
      getInfoList({ id: this.id }).then(res => {
        this.ids = res.data.ids;
        this.item = res.data;
      });
    },
    // 获取推荐数据
    getRcommendList() {
      getTabList({ classify: this.classify }).then(res => {
        this.list = res.data;
      });
    },
    changeSwipe(idx) {
      this.current = idx;
    },
    goBack() {
      this.$router.go(-1);
    },
    // 创建聊天室
    creataChat() {
      chat({
        id: this.userId,
        ids: this.ids,
        sf: localStorage.getItem("identity")
      }).then(res => {
        this.$router.push({
          name: "chat",
          params: {
            id: this.userId,
            ids: this.ids
          }
        });
      });
    },
    infoWindowClose() {
      this.show = false;
    },
    infoWindowOpen() {
      this.show = true;
    },
    // 获取周边区域信息
    getAreaList() {
      getMapArea({ area: this.area }).then(res => {
        this.nearby.center.lng = res.data[0].longitude;
        this.nearby.center.lat = res.data[0].latitude;
        this.area = res.data;
      });
    },
    // tab
    searchInfo(item, idx) {
      this.active = idx;
      this.keyword = item;
    }
  },
  //生命周期 - 创建完成 (可以访问当前this实例)
  created() {
    this.identity = localStorage.getItem("identity");
    this.area = this.$route.params.query;
    this.getDetailList();

    this.getRcommendList();
    this.getAreaList();
  },
  //生命周期 - 挂载完成 (可以访问DOM元素)
  mounted() {
    this.viewer = new Viewer({
      //获取盒子
      container: document.querySelector("#viewer"),
      panorama: this.imgurl1, // 全景图片
      //图片的尺寸
      size: {
        width: "100vw",
        height: "40vh"
      },
      plugins: [
        [
          //标记插件
          MarkersPlugin,
          {
            //切换标记
            markers: [
              {
                id: "circle",
                tooltip: "A circle of radius 30",
                //圆圈大小
                circle: 30,
                svgStyle: {
                  fill: "rgba(255,255,0,0.3)",
                  stroke: "yellow",
                  strokeWidth: "2px"
                },
                longitude: -1.5,
                latitude: -0.28,
                anchor: "center right"
              }
            ]
          }
        ]
      ]
    });

    const markersPlugin = this.viewer.getPlugin(MarkersPlugin);
    markersPlugin.on("select-marker", (e, marker) => {
      console.log("继续操作");

      this.viewer
        .animate({
          //经度
          longitude: marker.config.longitude,
          //维度
          latitude: marker.config.latitude,
          //缩小
          zoom: 100,
          speed: "-2rpm"
        })
        .then(() =>
          //全景图
          this.viewer.setPanorama(this.imgurl2).then(
            () =>
              //更新标记器
              markersPlugin.updateMarker({
                id: marker.id,
                longitude: -1.8,
                latitude: -0.28
              }),

            this.viewer
              .animate({
                zoom: 50,
                speed: "2rpm"
              })
              .then(() => (this.imgurl2 = this.imgurl3))
              .then(() => (this.imgurl3 = this.imgurl4))
            // .then(() => (this.imgurl4 = this.imgurl5))
            // .then(() => (this.imgurl5 = this.imgurl1))
          )
        );
    });
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style lang="scss" scoped>
.active {
  color: red;
  border-color: red;
}
.vr {
  border: 1px solid silver;
  padding: 5px 8px;
  color: red;
}
.van-collapse-item__content > p {
  padding-top: 10px;
}
.detail {
  background: rgba(242, 242, 242, 1);
}
.my-swipe {
  flex-shrink: 0;
}
.detail .my-swipe .van-swipe-item {
  width: 100%;
  height: 250px;
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
}
.detail-main {
  flex: 1;
}
.my-swipe .van-swipe-item img {
  width: 100%;
  height: 100%;
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  color: #fff;
}
.detail-list {
  background: #fff;
  h3 {
    padding: 15px;
  }
}
.jianjie {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  background: #fff;
  border-bottom: 1px solid #000;
}
.tao {
  height: 80px;
  display: flex;
  justify-content: space-around;
  background: #fff;
  align-items: center;
  margin-bottom: 15px;
}
.tao p {
  display: flex;
  flex-direction: column;
}
.detail-list .list-main-item {
  padding-left: 10px;
}
.list-main-item {
  display: flex;
  padding: 15px;
  align-items: center;
  img {
    width: 100px;
    height: 100px;
  }
  .list-text {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-left: 15px;
    font-size: 14px;

    .list-item-title {
      display: flex;
      span {
        font-size: 14px;
        border: 1px solid #ccc;
        padding: 3px 5px;
        margin-right: 10px;
      }
      p {
        font-size: 18px;
      }
    }
    .list-item-label {
      display: flex;
      align-items: center;
      span {
        padding: 4px 5px;
        border: 1px solid #ccc;
        margin-right: 15px;
      }
    }
  }
}

.mapBox {
  width: 100%;
  height: auto;
  margin: 10px 0;
  h3 {
    padding: 15px;
  }
  .map {
    width: 100%;
    height: 200px;
  }
}

.btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 15px;
  left: 15px;
  text-align: center;
  z-index: 213;
  .icon {
    color: #fff;
    line-height: 30px;
  }
}
.tab {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-bottom: 8px;
  font-size: 14px;
  span {
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
}
</style>
